<template>
  <div id="category" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']">
    <!-- <c-title :hide="true" text=''></c-title> -->
    <div ref="category-head" class="category-head">
      <div class="category-template-four" v-if="commodity">
        <div v-for="(item, i) in tab_list" :key="i" class='template_four_goods_category' @click="onChangeGoods(item)"
          :class="{ 'active': current_goods_key == item.key }">{{ item.key == 'shop' ? '自营商品' : '抖音商品' }}
        </div>
      </div>
      <div class="search-box" >
        <div class="search-content" @click="gotosearch">
          <i class="iconfont icon-sousuo1"></i>
          {{ current_goods_key == 'tiktok' ? '输入关键词/口令搜索' : $i18n.t("category.搜索商品") }}
        </div>
      </div>
    </div>

    <div id="category-content" ref="menucontent" v-if="!fun.isTextEmpty(list) || !fun.isTextEmpty(onelist)"
      style="overflow:hidden" class="vh-92">
      <div id="err" v-if="err">{{ $i18n.t("category.未检测到子分类数据") }}!</div>

      <div id="carcontent2" :class="{ 'fix-fixed': activeName && activeName[0] == '1' }" v-if="!err">
          <template v-if="current_goods_key == 'shop'">
            <div class="right-box" >
              <!-- 广告图 -->
              <div class="branch" ref="imgBox" v-if="!fun.isTextEmpty(ADImg) || (decorate_config.classify_position==2&&webdesImage && webdesImage.length !== 0)">
                <a :href="ADUrl | href_filters" v-if="!fun.isTextEmpty(ADImg)">
                  <img style="width: 100%; max-height: 40vh;" :src="ADImg" />
                </a>
                <div class="branch_no" v-if="decorate_config.classify_position==2&&webdesImage && webdesImage.length !== 0">
                  <swiper style="width: 100%;height: 100%;" :options="swiperOption">
                    <swiper-slide class="swiper-itemH flex" v-for="(item, index) in webdesImage" :key="index">
                      <div class="swiper-item">
                        <img :src="item.img_url" />
                      </div>
                    </swiper-slide>
                  </swiper>
                </div>
              </div>

              <!-- 分类下拉框 -->
              <div class="category-select" v-if="decorate_config.classify_style == 1">
                <div v-if="checkPlugin" class="catagoryBox"
                  :class="[activeName && activeName[0] == '1' ? 'catagoryBoxFixed' : 'catagoryBox', this.fun.getPhoneEnv() == 3 && activeName && activeName[0] == '1' ? 'catagoryBoxFixedPcStyle' : '']"
                  :style="activeName && activeName[0] == '1' ? `top:${select_top}` : ''">
                  <template v-if="decorate_config.classify_position == 1 || this.active2">
                    <van-collapse v-model="activeName" :border="false">
                      <van-collapse-item name="1" :class="{ 'border-radius-32': activeName && activeName[0] == '1' }">
                        <div slot="title" class="activetitle">
                          <!-- 自定义标题 -->
                          <dl v-show="!fun.isTextEmpty(showTitle)">
                            <dt v-for="(o, index) in showTitle" :key="index"
                              :class="o.id == secondaryId ? 'addClass' : 'removeClass'"
                              @click.stop="clickActive(o, index)">{{o.name }}</dt>
                          </dl>
                          <template v-if="fun.isTextEmpty(showTitle) && activeName && activeName[0] == '1'">
                            <div class="shop-name">{{ first_category_name }}</div>
                          </template>
                          <p style="color:#969799;font-size:14px"
                            v-if="activeName.length == 0 && fun.isTextEmpty(list.recommend)">{{$i18n.t("category.选择分类") }}</p>
                        </div>
                        <div style="overflow-y: scroll; max-height: 32vh;">
                          <dl>
                            <dt v-for="(Secondary, index) in list.recommend" :key="index"
                              :class="Secondary.id == secondaryId ? 'addClass1' : 'removeClass1'"
                              @click.stop="clickActive(Secondary, index)">
                              {{ Secondary.name }}
                            </dt>
                            <dt v-show="isCategoryMore" @click.stop="getMoreData_1(0)" class="more-btn-class">查看更多<i
                                class="iconfont icon-member-bottom"></i></dt>
                          </dl>

                          <template v-if="list.set && list.set.cat_level == '3' && !fun.isTextEmpty(threeInfo)">
                            <p class="threeTitle">{{ SecondaryName || $i18n.t("category.三级分类") }}</p>
                            <dl>
                              <dt v-for="(three, indexs) in threeInfo" :key="indexs"
                                :class="three.id == threeId ? 'three-addClass' : 'three-removeClass'"
                                @click="chooseThree(three.id)" class="three-btn">{{ three.name }}</dt>
                            </dl>
                          </template>
                        </div>
                        <p v-if="fun.isTextEmpty(list.recommend)">{{ $i18n.t("category.暂无其他分类") }}</p>
                      </van-collapse-item>
                    </van-collapse>
                  </template>

                  <template v-else-if="list.set.cat_level == '3'">
                    <van-collapse v-model="activeName" :border="false">
                      <van-collapse-item name="1" :class="{ 'border-radius-32': activeName && activeName[0] == '1' }">
                        <div slot="title" class="activetitle">
                          <div v-if="activeName && activeName[0] == '1'" class="shop-name">{{ first_category_name }}</div>
                          <dl v-show="!fun.isTextEmpty(threeInfo)"
                            :class="{ 'wrap': activeName && activeName[0] == '1' }">
                            <dt v-for="(o, index) in threeInfo" :key="index"
                              :class="[o.id == threeId ? 'addClass' : 'removeClass', activeName && activeName[0] == '1' ? 'mb-16' : '']"
                              @click.stop="chooseThree(o.id)" style="margin-bottom:0.5em">{{ o.name }}</dt>
                          </dl>
                        </div>
                      </van-collapse-item>
                    </van-collapse>
                  </template>
                </div>
                <!-- 排序筛选框 -->
                <c-sort typeName="category" :show="true" @sortIn="sortOut" @showscreen="showbox" text="搜索结果"
                  v-if="checkPluginSort"></c-sort>
              </div>
            </div>

            <!-- 商品列表 -->
            <van-skeleton title :row="6" :loading="loading">
              <div class="goodsList" ref="goodsWrapper">
                <div :class="{'self-goods':decorate_config.classify_style == 1}">
                  <template v-if="decorate_config.classify_style == 1">
                    <div class="goodWrapper" :class="{ 'goodWrapperBox': decorate_config.goods_sort == 2 }"
                      :style="{ backgroundColor: decorate_config.goods_sort == 2 ? '#fff' : '#f4f4f4' }"
                      v-if="!this.fun.isTextEmpty(foodInfo)">
                      <div class="list"
                        :class="decorate_config.goods_sort == 2 ? 'category_template01' : 'category_template04'"
                        v-for="(good, indexs) in foodInfo" :key="indexs" @click="gotoGoods(good.goods_id, good)">
                        <div class="img">
                          <img :src="good.thumb" referrerpolicy="no-referrer" />
                        </div>
                        <li class="goods-info">
                          <ul class="info-class">
                            <li class="info_a" style="-webkit-box-orient: vertical;">
                              <div class="goods-title">{{ good.title | escapeTitle }}</div>
                              <div class="goods-label-box" v-if="good.label_list && good.label_list.length > 0">
                                <span class="goods-label" v-for="(labelItem) in good.label_list" :key="labelItem.id">
                                  {{labelItem.name }}
                                </span>
                              </div>
                            </li>
                            <li class="info_b" v-if="!fun.getGlobalParameter('hide_total_sales', false)">
                              {{$i18n.t("category.已售") }}{{ good.show_sales + good.virtual_sales }}{{ good.sku }}
                            </li>
                            <li :class="info_c_height(good)">

                              <template v-if="good.point_goods">
                                <span class="price" style="color: #ff9500;">
                                  <small>{{point_goods(good)}}</small><small>{{ integral }}</small>
                                </span>
                              </template>

                              <template v-else>
                                <span :class="price_hidden(good)">
                                  <small>{{ $i18n.t("money") }}</small>{{ checkPrice(good) }}
                                </span>
                              </template>

                              <template v-if="decorate_config.cart_style !== 0 & good.is_special != 1">
                                <!--good.is_special 特殊商品加入购物车隐藏-->
                                <div class="select"
                                  v-if="good.has_option != 1 && good.plugin_id != 40 && decorate_config.cart_style == 1">
                                  <transition name="fade">
                                    <i v-if="goodsCarts[good.id]" class="iconfont icon-life-game-sign"
                                      @click.stop="numberLeft(good.id)"></i>
                                  </transition>
                                  <input type="tel" title="number"
                                    v-if="goodsCarts[good.id] && !goodsCarts[good.id].option_str" @click.stop
                                    v-model.lazy="goodsCartsTotal[good.id].total"
                                    @focus="clickCount(goodsCartsTotal[good.id].total)"
                                    @blur="changeCount(goodsCarts[good.id].id, goodsCartsTotal[good.id].total, 0, good)" />
                                  <span v-if="goodsCarts[good.id] && goodsCarts[good.id].option_str" @click.stop>{{
      goodsCartsTotal[good.id].total }}</span>
                                  <i @click.stop="numberRight(good.id, good.stock, good)" class="iconfont"
                                    :class="goodsCarts[good.id] && !goodsCarts[good.id].option_str ? 'icon-life-game-plus' : 'icon-gouwuche3'"></i>
                                </div>
                                <!-- 分类页返回了plugin_id:0||商城商品，plugin_id：40||租赁，plugin_id：92||供应商商品 140卡券商品-->
                                <div class="select optionClass"
                                  v-if="(good.has_option == 1 && good.plugin_id != 140 || decorate_config.cart_style == 2) && good.plugin_id !== 40">
                                  <i style="background-color: var(--themeBaseColor);" class="iconfont icon-gouwuche3"
                                    @click.stop="addGood(good)"></i>
                                  <i class="cart-num"
                                    v-if="!fun.isTextEmpty(goodsCartsTotal[good.id])">{{ goodsCartsTotal[good.id].total
                                    }}</i>
                                </div>
                                <span class="select leaseBox" v-if="good.plugin_id == 40">
                                  {{ $i18n.t("category.去租赁") }}
                                </span>
                              </template>
                              <template v-else>
                                <div class="select">
                                  <i class="iconfont icon-gouwuche3"></i>
                                </div>
                              </template>
                            </li>
                            <div class="vip-price-txt" v-show="good.is_open_micro == 1" style="font-size: 0.75rem;">
                              {{ vip_price_txt }}：{{ $i18n.t("money") }}{{ checkVipPrice(good) }}
                            </div>
                            <div class="pass_price" v-if="good.pass_price">
                              {{ good.pass_price.name }}:{{ good.pass_price.price }}
                            </div>
                            <div
                              v-if="(good.points_price_display || good.first_cat_name) && decorate_config.goods_sort == 2"
                              class="points_price_display_box">
                              <div class="points_price_display_box_t"
                                v-if="good.points_price_display && good.points_price_display.deduction">
                                {{ good.points_price_display.deduction }}{{ integral }}</div>
                              <div class="Child_now_price_coupon f-11" :style="[coupon_price_displayc_style()]"
                                v-if="coupon_price_displayc(good)">{{ coupon_price_displayc(good) }}</div>
                            </div>
                          </ul>
                        </li>
                      </div>
                      <div class="space">{{ LoadMoreTest }}</div>
                    </div>
                    <div v-else>
                      <img src="../../assets/images/no-more-product.png" alt="" style="width: 5rem; margin-top: 6rem;" />
                    </div>
                  </template>
                  <template v-else>
                    <!-- 二级分类在右侧 -->
                    <c-carcontent hide="true" :list="contentlist_one"
                      v-if="decorate_config.classify_position == 1 && contentlist_one && contentlist_one.length !== 0"
                      :title="parentTitle" @bindOneCategory="bindOneCategory" :parentId="parentId" />
                    <!-- 二级分类在左侧 -->
                    <c-carcontent4 v-else hide="true" :list="contentlist_one" :parentTitle="parentTitle"
                      :parentId="parentId" @bindOneCategory="bindOneCategory" />
                  </template>
                  <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
                </div>
              </div>
            </van-skeleton>
          </template>
          <template v-if="current_goods_key == 'tiktok'">
            <div class="nav">
              <div class="tab">
                <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
                <span @click="choose(2)"
                  :class="{ active: choose_index == 2, up: sort.up == 1 && choose_index == 2, down: sort.down == 1 && choose_index == 2 }"
                  class="grid-content">销量</span>
                <span @click="choose(3)"
                  :class="{ active: choose_index == 3, up: sort.up == 1 && choose_index == 3, down: sort.down == 1 && choose_index == 3 }"
                  class="grid-content">价格</span>
              </div>
            </div>
            <van-skeleton title :row="6" :loading="loading">
              <div class="goodsList" ref="TikTokWrapper" style=" background: #f1f1f1;">
                <div>
                  <div :class="decorate_config.goods_sort == 1 ? 'tiktok-list' : 'tiktok-list-horizontal'">
                    <div class="list-item" v-for="item in tiktok_list" :key="item.id" @click="link_tiktok_cps(item)">
                      <div class="img">
                        <van-image width="100%" height="100%" :src="item.cover" />
                      </div>
                      <div class="list-item-right">
                        <div class="title">{{ item.title }}</div>
                        <div class="item-center">
                          <div class="make-money" v-if="item.share_reward">
                            <span class="p-4 fs-10 line">赚</span>
                            <span class="p-4 fs-10">{{ item.share_reward }}</span>
                          </div>
                          <div class="buy">{{ item.sales }}</div>
                        </div>
                        <div class="item-bottom">
                          <div class="c-FF6238" style="font-size: 0.75rem; flex-shrink: 0;">
                            到手价
                            <span style="font-size: 0.875rem;">{{ $i18n.t('money') }}{{ item.coupon_price }}</span>
                          </div>
                          <div class="fs-12 c-999 line-through" style="flex-shrink: 0;">{{ $i18n.t('money') }}{{
    item.price }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
                </div>
              </div>
            </van-skeleton>
          </template>
      </div>

    </div>
    <!-- 左侧分类栏 -->
    <div id="rootlists" ref="menu" :class="activeName && activeName[0] == '1' ? 'vh-80' : ''">
      <ul id="rootList" v-if="onelist">

        <template v-if="current_goods_key == 'shop'">
          <li @click="bpfun" v-if="brandShow == '0'">
            <span>{{ $i18n.t("category.推荐品牌") }}</span>
          </li>
          <li @click="allList" v-if="categoryShow == '0'" :class="{ 'active': active2 }">
            <span>{{ $i18n.t("category.推荐分类") }}</span>
          </li>
        </template>
        <!-- 二级分类在左侧 -->

        <template v-if="decorate_config.classify_position == 2 && current_goods_key == 'shop'">
          <li v-for="(item, index) in onelist" :key="index" :class="{ active: active == index }"
            @click="tabsa(index, item)">
            <span
              :class="[active == index ? 'name_no' : 'name_no_ae', one_id == item.id && active == index ? 'p-24' : '']">{{ item.name }}</span>
            <template v-if="!active2">
              <template v-for="(iket, eind) in list.recommend">
                <div v-if="iket.parent_id == item.id && active != 9999" :key="eind"
                  :class="eind == child_category_active ? 'addClass_no dt' : 'removeClass_no dt' + ' dodL'"
                  @click.stop="clickActive(iket, eind)">{{ iket.name }}
                </div>
              </template>
            </template>
          </li>
        </template>

        <template v-else>
          <li v-for="(item, index) in onelist" :key="index" :class="{ active: active == index }"
            @click="tabsa(index, item)">
            <span>{{ item.name }}</span>
          </li>
        </template>

        <div style="height: 13rem;"></div>
      </ul>
    </div>
    <!-- 遮罩层 -->
    <div class="coverLayer" :style="activeName && activeName[0] == '1' ? `top:${select_top}` : ''" v-if="activeName == '1'" @click="change"></div>
    <!--选规格-->
    <van-popup v-model="show2" round position="center">
      <div class="spec_box q5" :style="{ width: fun.getPhoneEnv() == 3 ? '375px' : '' }">
        <div class="flex-c good-spec-popup">
          <img :src="popThumb" alt="" referrerpolicy="no-referrer">
          <div class="title clamp-2">{{ popTitle }}</div>
        </div>
        <div class="spec_a">
          <div v-for="(spec, i) in goodsInfo.has_many_specs" :key="i">
            <h5>{{ spec.title }}</h5>
            <ul class="option">
              <li @click.stop="selectSpecs(item, item.id)" v-for="(item, i) in spec.has_many_specs_item" :key="i"
                :class="specid.indexOf(item.id) >= 0 ? 'cur' : ''">
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
        <div class="add_car">
          <ul class="car_btn flex-c">
            <li class="left" v-if="goodsInfo.point_goods">
              {{ popPrice }}<span>{{ integral }}</span>
            </li>
            <li class="left" v-else>
              <div class="good-price">
                <span class="fz-24">{{ $i18n.t("money") }}</span>{{ popPrice }}
              </div>
              <div class="vip-price" v-if="isMultiSpecs">
                <van-loading class="m-l-w6" size="16" color="#fdbc2e" v-show="specsVIPPrc == 0" />
                <span class="m-l-w6" v-show="specsVIPPrc">&nbsp;{{ vip_price_txt }} {{ $i18n.t("money") }}{{ specsVIPPrc
                  }} </span>
              </div>
            </li>
            <li class="right">
              <span v-show="!popNum && popStock >= 1" @click.stop="submitAction">{{ $i18n.t("category.加入购物车")
                }}</span>
              <span v-show="popStock <= 0" style="background: #999;">库存不足</span>
            </li>
            <div class="Box" v-show="popNum >= 1">
              <i class="iconfont icon-store_reduceLine" @click.stop="changeCount(popCard.id, popNum - 1, -1)"></i>
              <label class="show">{{ popNum }}</label>
              <i class="iconfont icon-store_plus" @click.stop="changeCount(popCard.id, popNum + 1, 1)"></i>
            </div>
          </ul>
        </div>
      </div>
    </van-popup>

    <goodScreen v-model="showGoodScreen" @clone="cloneGoodScreen" :showCategory="true">
      <!-- 筛选弹窗 -->
    </goodScreen>
    <div style="height: 2.8125rem;"></div>
  </div>
</template>

<script>
import category from "./category_controller";
export default category;
</script>
<style lang="scss" rel="stylesheet/scss">

.fix-fixed {
  div:first-child {
    transform: none !important;
  }
}

#category {
  // overflow: hidden;
  .vip-price-txt {
    color: #3B3B4A;
    font-size: 0.75rem;

  }
  .category-head{
    position: relative;
    z-index: 1002;
  }

  .category-template-four {
    display: flex;
    align-items: center;
    line-height: 1;

    .template_four_goods_category {
      position: relative;
      padding: 0.7813rem 0.9688rem 0;
      color: #6E6E79;
      font-size: 0.875rem;
    }

    .active {
      color: #00001C;
      font-size: 1.0625rem;
      font-weight: bold;
      // margin-top: -0.0938rem !important;
    }

    .template_four_goods_category:first-child {
      padding-right: 0.3438rem;
      padding-left: 0.9688rem;
    }
  }

  .van-collapse::after {
    border: none;
  }

  .van-collapse-item__content {
    padding: 0 0.75rem 1.1875rem;
  }

  .catagoryBox {
    .van-cell__title {
      overflow: hidden;
    }
  }

}

/* 增加底部适配层 */
.iphoneXStyle #category-content,
#rootlists {
  padding-bottom: 24px;
}

#rootlists {
  overflow: hidden;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/css/category.scss";
::v-deep .category-select .catagoryBox .van-cell {
  padding: .9063rem .6875rem 0 !important;
}
.category-select {
  overflow: hidden;
  border-radius: 0.9375rem;
  // margin-top: 0.625rem;
  background-color: #fff;
}

.branch_no {
  height: auto;
  overflow: hidden;
  margin-top: 0.6875rem;

  .swiper-itemH {
    width: 100%;
    height: 7.5rem;
  }

  .swiper-item {
    width: 100%;
    height: 7.5rem;
  }

  img {
    width: 100%;
    height: 100%;
    border-radius: 0.9375rem;
  }
}

.name_no_ae {
  font-size: 0.8125rem;
  color: #3B3B4A;
  font-weight: 400;
  text-align: center;
}

.p-24 {
  padding: 0.75rem 0 !important;
}

.name_no {
  text-align: center !important;
  border-color: unset !important;
  border-left: 0 !important;
  font-size: 0.875rem;
  font-weight: bold;
  color: #00001c;
}

.addClass_no {
  position: relative;
  color: var(--themeBaseColor) !important;
}

.addClass_no::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  background-color: var(--themeBaseColor);
  height: 1.0938rem;
}

.dodL,
.addClass_no {
  width: 100%;
  min-height: 2.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8125rem;
  padding: 0 0.875rem;
  color: #00001C;
  box-sizing: border-box;
  font-weight: bold;
}

.pt-11 {
  padding-top: 0.37rem !important;
}

::v-deep .catagoryBox .van-collapse .van-collapse-item .van-cell::after {
  border-bottom: 1px solid #fff !important;
}

.shop-name {
  text-align: left;
  color: #00001C;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 1;
}

.f-10 {
  font-size: 0.625rem;
}

.f-14 {
  font-size: 0.875rem;
}

.c-bbb {
  color: #bbb;
}

.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-15 {
  margin-top: 1.125rem;
}

.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vh-80 {
  height: 80vh !important;
}

.vh-92 {
  height: 92vh !important;
}

#category {
  .unset_css {
    template {
      transform: unset !important
    }
  };

  .spec_box {
    width: 16.875rem;
    background: #fff;
    border-radius: 0.5rem;
    // padding: 0.75rem;

    .good-spec-popup {
      align-items: flex-start;
      padding: 0.75rem 0.75rem 0;

      img {
        width: 3.75rem;
        height: 3.75rem;
        background: #ededed;
        border-radius: 0.5rem;
        margin-right: 0.5938rem;
      }

      .title {
        flex: 1;
        font-size: 0.875rem;
        text-align: left;
        line-height: 1.125rem;
        margin-top: 0.4063rem;
        font-weight: 500;
      }
    }

    .spec_a {
      margin-top: 0.625rem;
      height: 12rem;
      overflow-y: scroll;
      padding: 0 0.75rem 0;

      h5 {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #6E6E79;
        display: block;
        line-height: 2.5rem;
        font-size: 0.75rem;
        text-align: left;
      }

      .option {
        display: flex;
        flex-wrap: wrap;

        .cur {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background-color: rgba($color: #f15353, $alpha: 0.1);
        }

        li {
          font-size: 0.8125rem;
          padding: 0 0.875rem;
          line-height: 1.5625rem;
          margin-right: 0.625rem;
          margin-bottom: 0.625rem;
          background: #f8f8f8;
          border: solid 0.0625rem #f8f8f8;
          border-radius: 0.1875rem;
          text-align: center;
        }
      }
    }

    .add_car {
      padding: 0.75rem;
      width: 100%;
      border-top: solid 0.0625rem #ebebeb;

      .car_btn {
        justify-content: space-between;
        height: 100%;

        .left {
          color: #f15353;
          font-size: 16px;
          text-align: left;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .good-price,
          .vip-price {
            width: 100%;
          }

          .fz-24 {
            font-size: 0.75rem;
          }

          .good-price {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 1.3125rem;
            font-weight: 500;
          }

          .vip-price {
            font-size: 10px;
            color: #fdbc2e;
          }

          span {
            font-size: 10px;
          }
        }

        .right span {
          display: block;
          width: 5.5625rem;
          height: 1.875rem;
          line-height: 1.875rem;
          border-radius: 1rem;
          background: #f15353;
          color: #fff;
          font-size: 14px;
        }

        .Box {
          display: flex;

          i {
            width: 28px;
            height: 1.75rem;
            line-height: 1.75rem;
            font-size: 26px;
            color: #f15353;
          }

          .icon-store_reduceLine {
            color: #aaa;
          }

          label {
            right: 2.1875rem;
            color: #333;
            font-size: 12px;
            padding: 0;
            width: 1.5rem;
            height: 1.75rem;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            line-height: 1.75rem;
            vertical-align: top;
            background-origin: content-box;
            background-color: transparent;
          }
        }
      }
    }
  }

  .right-box {
    padding: 0 0.625rem 0.625rem 0;
    border-radius: 0.9375rem;
    overflow: hidden;

    .branch {
      margin-bottom: .625rem;

      a {
        display: block;
        height: 100%;

        img {
          border-radius: 0.9375rem;
          display: block;
          overflow: hidden;
        }
      }
    }
  }

  #carcontent2 {
    color: #686868;
    margin-bottom: 3.75rem;
    // margin-top: 3%;
    display: flex;
    flex-direction: column;
    height: 100%;



    .active {
      color: #ef5452;
    }

    .content {
      background: #fff;
    }

    .nav {
      background-color: #fff;
      border-radius: 0.9375rem;
      margin: 0.625rem;
    }

    .tab {
      display: flex;
      justify-content: space-evenly;
      padding-top: 10px;
      padding-bottom: 12px;
      font-size: 0.75rem;

      .grid-content::after {
        content: "";
        display: inline-block;
        width: 0.5rem;
        height: 0.625rem;
        background: url(../../assets/images/jd-sprites.png) no-repeat;
        background-size: 12.5rem 12.5rem;
        background-position: -10.625rem -1.875rem;
        margin-left: 0.25rem;
      }

      .grid-content.up,
      .grid-content.down {
        color: #f15353;
      }

      .grid-content.up::after {
        background-position: -10.625rem -0.9375rem;
      }

      .grid-content.down::after {
        background-position: -10.625rem 0;
      }
    }

    .catagoryBoxFixedPcStyle {
      left: 50% !important;
      transform: translate(-50%, 0) !important;
      width: 375px;
    }

    .catagoryBoxFixed {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1005 !important;
    }



    .border-radius-32 {
      border-radius: 0 0 1rem 1rem;
      overflow: hidden;
    }

    .catagoryBox {
      // overflow: hidden;
      position: relative;
      min-height: 2.8em;
      z-index: 1005;

      .threeTitle {
        position: relative;
        height: 2.6875rem;
        line-height: 2.6875rem;
        font-size: 0.875rem;
        color: #202020;
        text-align: center;
        font-weight: 500;
      }

      .threeTitle::before {
        content: "";
        position: absolute;
        width: 6.25rem;
        left: 0.75rem;
        top: 50%;
        height: 1px;
        background-color: #E8E8E8;
      }

      .threeTitle::after {
        content: "";
        position: absolute;
        width: 6.25rem;
        right: 0.75rem;
        top: 50%;
        height: 1px;
        background-color: #E8E8E8;
      }

      .c-t-04-addClass::after {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: var(--themeBaseColor);
        // opacity: .1;
      }

      dl {
        display: flex;
        flex-wrap: wrap;

        dt {
          flex-shrink: 0;
          height: 1.6875rem;
          line-height: 1.6875rem;
          min-width: 4.375rem;
          font-size: 0.75rem;
          padding: 0 0.4688rem;
          border-radius: 0.9375rem;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
          box-sizing: border-box;
          color: #696969;
          background: #f8f8f6;
        }

        .addClass,
        .addClass1 {
          position: relative;
          color: var(--themeBaseColor);
          border: 1px solid var(--themeBaseColor);
          overflow: hidden;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: var(--themeBaseColor);
            opacity: .1;
          }
        }

        .three-btn {
          min-width: 4.375rem;
          font-size: 0.6875rem;
          height: 1.6875rem;
          line-height: 1.6875rem;
          padding: 0 0.375rem;
          border-radius: 0.875rem;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
          color: #696969;
          background: #f8f8f6;
        }

        .three-addClass {
          position: relative;
          color: var(--themeBaseColor);
          border: 1px solid var(--themeBaseColor);
          overflow: hidden;
        }

        .three-addClass::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-color: var(--themeBaseColor);
          opacity: .1;
        }

        .more-btn-class {
          background: transparent;
          border: none;
          color: #fb5050;
          display: flex;
        }

        // dt:first-of-type {
        //   margin-left: 0;
        // }
      }

      .wrap {
        flex-wrap: wrap !important;
      }

      .mb-16 {
        margin-bottom: .5rem !important;
      }

      .activetitle {
        overflow-x: auto;

        dl {
          flex-wrap: nowrap;

          dt {
            flex-shrink: 0;
            margin-bottom: 0;
            height: 1.6875rem;
            line-height: 1.6875rem;
          }
        }
      }
    }


    .goodsList {
      margin-right: 0.625rem;
      overflow: hidden;
      position: relative;
      flex: 1;
      position: relative;

      .self-goods {
        background-color: #fff;
        border-radius: 0.625rem;
        overflow: hidden;
      }

      .goodWrapperBox {
        padding: 0.625rem 0.625rem 0;
      }

      .goodWrapper {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .goodWrapper::after {
        display: block;
        background: transparent;
        content: " ";
        width: 100%;
        height: 3.625rem;
      }

      .space {
        width: 100%;
        height: 8.625rem;
        margin-top: 0.5rem;
      }

      .category_template01 {
        display: flex;
        padding: 0 0 0.9375rem 0;
        width: 100%;

        .img {
          width: 5.625rem;
          height: auto;
          overflow: hidden;
          background-size: cover;

          img {
            display: block;
            width: 100%;
            // height: 100%;
            border-radius: 0.5rem;
          }
        }

        .goods-info {
          padding-left: 0.625rem;

          .info-class .info_c .select .iconfont {
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
            font-size: 12px;
          }
        }
      }

      .category_template04:first-child {
        margin-top: 0;
      }

      .category_template04:nth-child(2) {
        margin-top: 0;
      }

      .category_template04 {
        width: 49%;
        background: #fff;
        margin-top: 0.625rem;
        border-radius: 0.5rem;
        overflow: hidden;

        .img {
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          position: relative;

          img {
            width: 100%;
            right: 0;
            height: 100%;
            position: absolute;
          }
        }

        .goods-info {
          padding: 0.7813rem 0.5938rem 0.75rem 0.5rem;

          .info-class .info_c .select i {
            font-size: 10px;
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
          }
        }
      }

      .goods-info {
        flex: 1;
        text-align: left;

        .info-class {
          .info_a {
            margin-bottom: 0.25rem;

            .goods-title {
              line-height: 1.125rem;
              font-size: 0.875rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              color: #3B3B4A;
            }

            .goods-label-box {
              margin: 0.5rem 0;
              max-height: 30px;
              text-align: left;
              font-size: 12px;
              color: rgb(136, 136, 136);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-break: break-all;

              .goods-label {
                margin-right: 6px;
              }
            }
          }

          .info_b {
            color: #999;
            // line-height: 1.25rem;
            // margin-bottom: 0.125rem;
            // text-decoration: line-through;
            font-size: 0.625rem;
          }

          .info_c_height {
            height: auto !important;
          }

          .info_c {
            display: flex;
            justify-content: space-between;
            height: 1.25rem;
            align-items: flex-end;

            .price {
              color: #f15353;
              font-size: 0.9375rem;
              flex: 1;
              font-weight: bold;

              small {
                font-size: 0.75rem;
                font-weight: 400;
              }
            }

            .price_hidden {
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 超出部分显示省略号 */
              white-space: nowrap;
              /* 规定段落中的文本不进行换行 */
            }

            .standard {
              button {
                height: 1.25rem;
                width: 2.5rem;
                background-color: #f15353;
                border: none;
                border-radius: 0.75rem;
                color: #fff;
              }
            }

            .select {
              display: flex;

              span {
                outline: none;
                border: none;
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                line-height: 1.25rem;
                font-size: 14px;
                text-align: center;
              }

              input {
                outline: none;
                border: none;
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                line-height: 1.25rem;
                font-size: 14px;
                text-align: center;
              }

              i:first-child {
                background-color: #ccc;
              }

              i:last-child {
                background-color: var(--themeBaseColor);
              }

              i {
                text-align: center;
                border-radius: 0.75rem;
                color: #fff;
              }
            }

            .leaseBox {
              padding: 0 0.5rem;
              background: #f15353;
              color: #fff;
              line-height: 1.25rem;
              height: 1.25rem;
              border-radius: 1rem;
              font-size: 12px;

              p {
                font-size: 0.75rem;
              }
            }

            .optionClass {
              position: relative;

              .cart-num {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 0.9375rem !important;
                height: 0.9375rem !important;
                line-height: unset !important;
                font-size: 0.6875rem !important;
                position: absolute;
                top: -0.6rem;
                right: -5px;
                color: #fff;
                border-radius: 0.9375rem;
                border: 1px solid #fff;
                background-color: #FCA624 !important;
              }
            }
          }
        }
      }
    }
  }
}

.coverLayer {
  //遮盖层
  // width: 100%;
  // height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
}

.pass_price {
  text-align: left;
  font-size: 0.625rem;
  color: #867e7e;
}

.tiktok-list-horizontal {
  background-color: #fff;
  border-radius: 0.625rem;
  padding: 0.625rem;
  margin: 0.625rem;

  .list-item {
    display: flex;
    margin-bottom: 1rem;
  }

  .img {
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 5.625rem;
    height: 5.625rem;
    background-size: cover;
  }

  .list-item-right {
    flex: 1;
    padding: 0.2188rem 0 .25rem 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .item-center {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .title {
    text-align: left;
    line-height: 1.125rem;
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #3B3B4A;
  }

  .make-money {
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .line {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0.0313rem;
        height: 100%;
        background: #ff7b05;
      }
    }

  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .buy {
    color: #999;
    font-size: 0.75rem;
    margin: 0.3125rem 0;
  }

  .item-bottom {
    display: flex;
    align-items: center;
    // flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .line-through {
    text-decoration: line-through;
    order: -1;
    margin-right: 0.3125rem;
  }

  .c-999 {
    color: #999;
  }

  .fs-12 {
    font-size: 0.75rem;
  }

}

.tiktok-list {
  height: 100%;
  margin: 0.625rem;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .list-item-right {
    padding: 0.25rem;
    width: 100%;
  }

  .ml-12 {
    margin-left: 0.75rem;
  }

  .line-through {
    text-decoration: line-through;
  }

  .c-999 {
    color: #999;
  }

  .fs-12 {
    font-size: 0.75rem;
  }

  .ml-4 {
    margin-left: 0.25rem;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .item-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .make-money {
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .line {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0.0313rem;
        height: 100%;
        background: #ff7b05;
      }
    }
  }

  .item-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0;
  }

  .title {
    // display: flex;
    text-align: left;
    line-height: 1.25rem;
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #000;
  }

  .buy {
    color: #999;
    font-size: 0.75rem;
  }

  .img {
    width: 100%;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    overflow: hidden;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.2rem 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #f1f1f1;
    padding-bottom: 3.125rem;
    padding-top: 0.5rem;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(/../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }

  .active {
    color: #ef5452;
  }

  .tab {
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .current_category {
    color: var(--themeBaseColor);
  }
}

.points_price_display_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;

  .points_price_display_box_t {
    font-size: 0.94rem;
    font-weight: 500;
    color: #F15353;
    text-align: left;
  }

  .Child_now_price_coupon {
    display: inline-block;
    padding: 0 0.25rem;
    border-radius: 0.325rem;
    font-weight: 500;
    text-align: left;
  }
}
</style>
